<template>
    <view class="container">
        <view class="main" :style="{ transform: 'translateY(' + translateY + 'px)' }">
            <view class="plan" style="">
                <image :src="imageBaseUrl + '/img/aircrafts.png'" />
            </view>
            <view class="second" v-if="state">
                <view class="second-input">
                    <div class="inputs" style="background-color: white;">
                        <uv-input placeholder="请输入手机号" type="number" border="none" v-model="tel"></uv-input>
                    </div>
                    <div class="inputs" style="background-color: white;">
                        <uv-input placeholder="请输入密码" v-model="pass" border="none" type="password"></uv-input>
                    </div>
                </view>
                <view class="many">
                    <view class="mast">
                        <checkbox-group @change="onAgreementChange">
                            <label>
                                <checkbox :checked="isAgreed" />
                                <text @click="openAgreement" class="agreement-link"></text>
                            </label>
                        </checkbox-group>
                        <text @click="toggleAgreement">用户协议</text> <!-- 这里点击文字时切换复选框 -->
                    </view>
                    <view>
                        <text @click="toggleAgreementa">忘记密码？</text>
                        <text @click="switchover">前往注册</text>
                    </view>
                </view>
                <button class="register" style="width: 90%;" @click="validateLogin">登录</button>
                <div class="null"></div>

            </view>
            <view class="bottom">
                <view class="WeChat" bind:tap="login" v-if="state">
                    <image :src="imageBaseUrl + '/img/vx.png'" style="" />
                </view>
                <view class="font">
                    <text>@版权归大喇叭编程实训基地所有</text>
                </view>
            </view>
            <div class="seconds" v-if="!state">
                <view class="plans">
                    <uv-upload :fileList="fileList1" name="1" multiple :maxCount="10" @afterRead="afterRead"
                        @delete="deletePic"></uv-upload>
                </view>
                <view class="second-input">
                    <div class="inputs" style="background-color: white;">
                        <uv-input placeholder="请输入昵称" type="text" border="none" v-model="neckName"></uv-input>
                    </div>
                    <div class="inputs" style="background-color: white;">
                        <uv-input placeholder="请输入手机号" type="number" border="none" v-model="teladd"></uv-input>
                    </div>
                    <div class="inputs" style="background-color: white;">
                        <uv-input placeholder="请输入密码" type="password" border="none" v-model="passadd"></uv-input>
                    </div>
                    <div class="inputs" style="background-color: white;">
                        <input type="password" style="width: 200px;" id="password" placeholder="输入编号（可不填）"
                            bindinput="onInputPass" />
                        <image class="imgs" :src="imageBaseUrl + '/img/scan.png'" />
                    </div>
                    <div class="sex">
                        <!-- 单选框 -->
                        <div class="sexs">
                            <view class="sexs">
                                <uv-radio-group v-model="selectedGender" @change="onChangeGender">
                                    <uv-radio :customStyle="{ margin: '8px' }" v-for="(item, index) in genders"
                                        :key="index" :label="item.name" :name="item.name">
                                    </uv-radio>
                                </uv-radio-group>
                            </view>
                        </div>
                        <text @click="switchover" style="color:#2A82E4;">前往登录</text>
                    </div>
                    <button class="register" style="width: 90%;" @click="registera">注册</button>
                </view>
            </div>

        </view>
        <div class="user" v-if="isShow">
            <div class="user_top">用户协议</div>
            <div class="user_title">{{ data.title }}</div>
            <div class="user_content" v-html="data.content"></div>
            <button class="registers" style="width: 90%;" @click="toggleAgreements">我已阅读</button>
        </div>
        <div class="curtain" v-if="isShows" @click="toggleAgreementa"></div>
        <div class="forgets" v-if="isShows">
            <div style="text-align: center;height:40px;line-height: 40px;">修改密码</div>
            <div class="forget_input">
                <uv-input placeholder="请输入手机号" type="number" v-model="forgetTel"></uv-input>
            </div>
            <div class="forget_input">
                <uv-input placeholder="请输入新密码" v-model="forgetPass" type="password"></uv-input>
            </div>
            <div class="forget_input">
                <uv-input placeholder="再次输入新密码" v-model="forgetPasss" type="password"></uv-input>
            </div>
            <div class="line"></div>
            <div class="box">
                <div class="cancel" @click="toggleAgreementa">取消</div>
                <div class="confirm" @click="validateForget">确认</div>
            </div>
        </div>
    </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import api from '../../api/user/index.js';
import config from '../../config/index.js';
const imageBaseUrl = config.image;
const translateY = ref(0);// 顶部导航栏位移
const data = ref([]);//用户协议数据
const tel = ref('');//登录账号
const pass = ref('');//登录密码
const forgetTel = ref('');//忘记密码账号
const forgetPass = ref('');//忘记密码密码
const forgetPasss = ref('');//忘记密码确认密码
const neckName = ref('');//昵称
const teladd = ref('');//手机号
const passadd = ref('');//密码
const isShow = ref(false);//显示用户协议
const isShows = ref(false);//显示忘记密码
const state = ref(true);//显示注册登录
const isChecked = ref(false);//是否同意用户协议
const selectedGender = ref('男');//性别
const img = ref('');//头像
const genders = [//性别
    { name: '男', value: '1', disabled: true },
    { name: '女', value: '2' }
];
const isAgreed = ref(false);//是否同意用户协议
const fileList1 = ref([]);//图片                            

// 删除图片
const deletePic = (event) => {
    fileList1.value.splice(event.index, 1);
};

// 新增图片
const afterRead = async (event) => {
    // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
    let lists = [].concat(event.file);
    let fileListLen = fileList1.value.length;
    lists.map((item) => {
        fileList1.value.push({
            ...item,
            status: 'uploading',
            message: '上传中'
        });
    });
    for (let i = 0; i < lists.length; i++) {
        const result = await uploadFilePromise(lists[i].url);
        let item = fileList1.value[fileListLen];
        fileList1.value.splice(fileListLen, 1, Object.assign(item, {
            status: 'success',
            message: '',
            url: result
        }));
        fileListLen++;
    }
};
//  上传图片
const uploadFilePromise = (url) => {
    return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
            url: 'https://jingqu.kuxia.top/app/File/file', // 仅为示例，非真实的接口地址
            filePath: url,
            name: 'file',
            header: {
                id: 23
            },
            formData: {
                user: 'test'
            },
            success: (res) => {
                console.log(JSON.parse(res.data));
                img.value = JSON.parse(res.data).data.url;
                setTimeout(() => {
                    resolve(res.data.data);
                }, 1000);
            }
        });
    });
};
// 用户协议点击事件
const onAgreementChange = (e) => {
    isAgreed.value = e.detail.value.length > 0;
};
//  显示用户协议
const switchover = () => {
    state.value = !state.value;
    //清空头像
    img.value = '';
    fileList1.value = [];
};
//性别
const onChangeGender = (e) => {

    console.log(selectedGender.value);
};
onMounted(() => {
    api.agreement({
    }).then((res) => {
        data.value = res.data;
        console.log(data.value, 123);

    });
});
// 忘记密码确定
const validateForget = () => {
    if (forgetTel.value === '') {
        uni.showToast({
            title: '请输入手机号',
            icon: 'none'
        });
        return;
    }
    if (!/^1[3-9]\d{9}$/.test(forgetTel.value)) {
        uni.showToast({
            title: '请输入正确的手机号',
            icon: 'none'
        });
        return;
    }
    if (forgetPass.value === '') {
        uni.showToast({
            title: '请输入密码',
            icon: 'none',
        });
        return false;
    }
    if (forgetPass.value.length < 6 || forgetPass.value.length > 20) {
        uni.showToast({
            title: '密码长度6-20位',
            icon: 'none'
        });
        return false;
    }
    if (forgetPasss.value === '') {
        uni.showToast({
            title: '请输入确认密码',
            icon: 'none',
        });
        return false;
    }
    if (forgetPass.value !== forgetPasss.value) {
        uni.showToast({
            title: '两次密码不一致',
            icon: 'none',
        });
        return false;
    }
    api.amend({
        tel: forgetTel.value,
        pass: forgetPass.value,
    }).then((res) => {
        if (res.code === 1) {
            uni.showToast({
                title: '修改成功',
                icon: 'none',
            });
            tel.value = forgetTel.value
            isShows.value = false
        } else {
            uni.showToast({
                title: res.msg,
                icon: 'none',
            });
        }
    });
};
//注册
const registera = () => {
    if (!img.value) {
        uni.showToast({
            title: '请上传头像',
            icon: 'none'
        });
        return;
    }
    if (neckName.value === '') {
        uni.showToast({
            title: '请输入昵称',
            icon: 'none'
        });
        return;
    }
    if (neckName.value.length > 6) {
        uni.showToast({
            title: '昵称不能超过6个字',
            icon: 'none'
        });
        return;
    }
    if (teladd.value === '') {
        console.log(teladd.value);
        uni.showToast({
            title: '请输入手机号',
            icon: 'none',
        });
        return;
    }
    if (!/^1[3-9]\d{9}$/.test(teladd.value)) {
        uni.showToast({
            title: '请输入正确的手机号',
            icon: 'none'
        });
        return;
    }
    if (!passadd.value) {
        uni.showToast({
            title: '请输入密码',
            icon: 'none'
        });
        return;
    }
    if (passadd.value.length < 6 || passadd.value.length > 16) {
        uni.showToast({
            title: '密码长度为6-16位',
            icon: 'none'
        });
        return;
    }
    api.register({
        img: img.value,
        nickname: neckName.value,
        tel: teladd.value,
        pass: passadd.value,
        sex: selectedGender.value === '男' ? 1 : 2
    }).then((res) => {
        console.log(res);
        if (res.code === 1) {
            uni.showToast({
                title: '注册成功',
                icon: 'none'
            });
            tel.value = teladd.value;
            teladd.value = '';
            neckName.value = '';
            passadd.value = '';
            state.value = true;
        } else {
            uni.showToast({
                title: res.msg,
                icon: 'none'
            });
        }
    });

};
// 监听键盘弹出事件
const handleKeyboardShow = (e) => {
    translateY.value = -e.detail.height;
};

// 监听键盘收起事件
const handleKeyboardHide = () => {
    translateY.value = 0;
};

onMounted(() => {
    // 监听键盘弹出和收起事件
    uni.onKeyboardShow(handleKeyboardShow);
    uni.onKeyboardHide(handleKeyboardHide);
});
const toggleAgreementa = () => {
    // 处理用户协议点击
    isShows.value = !isShows.value;
};
onUnmounted(() => {
    // 移除键盘弹出和收起事件的监听
    uni.offKeyboardShow(handleKeyboardShow);
    uni.offKeyboardHide(handleKeyboardHide);
});
const handleCheckboxChange = (e) => {
    isChecked.value = e.detail.value.length > 0;
    console.log(isChecked.value);
};


const toggleAgreement = () => {
    // 处理用户协议点击
    isShow.value = !isShow.value;
};
const toggleAgreements = () => {
    // 处理用户协议点击
    isShow.value = !isShow.value;
    //选中复选框
    isAgreed.value = true;
};
const validateLogin = () => {
    // 处理登录验证
    if (tel.value == '') {
        uni.showToast({
            title: '请输入手机号',
            icon: 'none'
        });
    } else if (!/^1[3456789]\d{9}$/.test(tel.value)) {
        uni.showToast({
            title: '请输入正确的手机号',
            icon: 'none'
        });
    } else if (pass.value == '') {
        uni.showToast({
            title: '请输入密码',
            icon: 'none'
        });
    } else if (pass.value.length < 6 || pass.value.length > 16) {

        uni.showToast({
            title: '密码长度6-16位',
            icon: 'none'
        });
    } else if (isAgreed.value == false) {
        isShow.value = true;
        uni.showToast({
            title: '请阅读并同意用户协议',
            icon: 'none'
        });
    } else {
        api.login({
            tel: tel.value,
            pass: pass.value,
        }).then((res) => {
            console.log(res, 123);
            if (res.code == 1) {
                uni.setStorageSync('token', res.data);
                uni.showToast({
                    title: '登录成功',
                    icon: 'none'
                });
                uni.redirectTo({
                    url: '/pages/home/home'
                });
            } else {
                uni.showToast({
                    title: res.msg,
                    icon: 'none'
                });
            }
        })

    }

};

</script>

<style scoped>
.mast {
    display: flex;
}

.imgs {
    width: 30px;
    height: 30px;
    position: absolute;
    right: 5px;
    top: 3px;
}

.sex {
    width: 90%;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 5%;
}

.confirm {
    width: 50%;
    height: 40px;
    color: #2A82E4;
    text-align: center;
    line-height: 40px;
}

.cancel {
    width: 50%;
    height: 40px;
    color: #848181;
    text-align: center;
    line-height: 40px;
    border-right: #848181 solid 1px;
}

.box {
    width: 100%;
    display: flex;
    height: 40px;
}

.line {
    border-bottom: #848181 solid 1px;
}

.forget_input {
    width: 80%;
    margin-left: 10%;
    margin-bottom: 10px;
    line-height: 30px;
    border: #9d9fa4 solid 1px;
    border-radius: 5px;
}

.curtain {
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    z-index: 1;

}

.forgets {
    width: 70%;
    border-radius: 10px;
    height: 230px;
    margin-left: 15%;
    background-color: white;
    position: fixed;
    top: 300px;
    z-index: 2;
}

.user_content {
    white-space: pre-wrap;
    word-wrap: break-word;
    width: 90%;
    line-height: 20px;
    margin-left: 5%;
}

.user_title {
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}

.user_top {
    font-size: 19px;
    text-align: center;
    margin-top: 35px;
    font-weight: 600;
}

.user {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    background-color: white;
}

.inputs {
    width: 90%;
    height: 40px;
    line-height: 40px;
    margin-left: 5%;
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative;
    display: flex;
    align-items: center;
}

.container {
    width: 100%;
    height: 100vh;
    background-color: #A5C9F3;
    background-image: url("http://lxj.skych.top//img/background.jpg");
    background-size: 100% 100%;
}

.main {
    width: 100%;
    display: flex;
    flex-direction: column;
    font-family: PingFang SC;
    background-repeat: no-repeat;
    background-size: 120% 100%;
    height: 100vh;
}

.aircraft {
    width: 60vw;
    height: 40vw;
    margin: 10vw;
}

.second {
    width: 90%;
    height: 250px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    margin-left: 5%;
    margin-top: 100px;
}

.seconds {
    width: 90%;
    height: 500px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    margin-left: 5%;
    margin-top: 100px;
}

.second-input input {
    width: 90%;
    height: 35px;
    outline: none;
    padding-left: 3px;
    border: 0;
    margin: 15px 0;
    margin-left: 5%;
}

/* input的placeholder字体样式 */
::-webkit-input-placeholder {
    font-size: 14px;
    color: #8b8c93;
}

.many {
    white-space: nowrap;
    width: 90%;
    display: flex;
    justify-content: space-between;
    margin-left: 5%;
    /* background-color: aqua; */
}

.many text {
    color: #2a82e4;
}

.many div {
    font-size: 14px;
    display: flex;
}

.register {
    width: 100%;
    height: 35px;
    margin-left: 5%;
    background-color: #2a82e4;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    margin-top: 20px;
    font-size: 15px;
}

.registers {
    width: 100%;
    height: 35px;
    margin-left: 5%;
    background-color: #5BA0EA;
    border-radius: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    margin-top: 20px;
    font-size: 15px;
}

.WeChat {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}

.image {
    width: 40px;
    height: 40px;
}

.font {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    color: #434447;
    white-space: nowrap;
}

.plan {
    width: 100%;
    text-align: center;
    height: 100px;
    margin-top: 80px;
}

.plan image {
    width: 220px;
    height: 150px;
    margin-left: 5px;
    margin-top: -20px;
}

.plans {
    width: 80px;
    height: 80px;
    border-radius: 40px;
    background-color: #E5E5E5;
    text-align: center;
    margin-left: 38%;
    margin-top: 20px;
    overflow: hidden;
}

.font text {
    margin-top: 20px;
}

/* 底部 */
.bottom {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0%;
}
</style>